<template>
  <div class="tree" @click.stop = "send(item,$event)" v-for="item in data">
    <input type="checkbox" v-model="item.checked" ><span>{{ item.name }}</span>
    <Tree v-if="item.children?.length" :data ="item?.children"></Tree>
  </div>
</template>

<script setup lang=ts>
interface Tree {
  name: string,
  checked: boolean,
  children?: Tree[]
}
defineProps<{
  data?:Tree[]
}>()
const send = (item:Tree,e:any)=>{
  console.log(item.name,e);
  
}
</script>

<style scoped lang="less">
.tree{
  margin-left: 30px;
}
</style>